<template>
	<view :class="mark?'markHide':'createPerson-mark'">
		<view class="mark-part">
			<view class="Invitation-code">
				<text>我的邀请码</text>
				<text class="code-yard">{{code}}</text>
			</view>
			<view class="Invitation-QRcode">
				<view class="QRcode-image">
					<image :src="QRcode" mode=""></image>
				</view>
				<view class="QRcode-button">
					<button type="primary">发送链接</button>
					<button type="primary" @click="saveCode">保存二维码</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  import QR from "@/common/wxqrcode.js" // 二维码生成器  
  import {base64ToPath} from 'image-tools';
  export default{
	  data(){
		  return{
			  QRcode:null
		  }
	  },
	  props:{
		mark:{
			type:Boolean,
			default:true
		},
		code:{
			type:String,
			default:""
		}
	  },
	  created(){
		  this.QRcode=QR.createQrCodeImg("臭佳佳臭臭", {  
		       size: parseInt(300)//二维码大小  
		  })
		  console.log(this.QRcode)
	  },
	  methods:{
		  saveCode(){
			  base64ToPath(this.QRcode)
			    .then(path => {
			      console.log(path)
				  uni.saveImageToPhotosAlbum({
				  	filePath: path,
				  	success: () => {
				  		uni.showToast({
				  			title: "保存成功",
				  			icon: "none"
				  		});
						this.$emit('saveCode',path)
				    }
				  })
			  })
			    .catch(error => {
			      console.error(error)
			  })
		  }
	  }
  }
</script>

<style lang="scss" scoped>
		.markHide{
			display: none;
		}
		.createPerson-mark{
			position: absolute;
			top:0;
			bottom:0;
			width: 100%;
			z-index: 1;
			background:rgba(0,0,0,0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			.mark-part{
				height: 60%;
				width: 80%;
				background: white;
				border-radius: 15upx;
				display: flex;
				flex-direction: column;
				&>.Invitation-code{
					width: 100%;
					flex: 2;
					display: flex;
					flex-direction: column;
					padding: 30upx 0upx;
					box-sizing: border-box;
					&>text{
						flex: 1;
						font-size: 34upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&>.code-yard{
						font-size: 42upx;
						color: #409EFF;
					}
				}
				&>.Invitation-QRcode{
					width: 100%;
					flex: 8;
					display: flex;
					flex-direction: column;
					&>.QRcode-image{
						flex: 7;
						width:100%;
						display: flex;
						align-items: center;
						justify-content: center;
						&>image{
							width: 55%;
							height: 80%;
						}
					}
					&>.QRcode-button{
						flex: 3;
						display: flex;
						justify-content: space-around;
						align-items: center;
						&>button{
							width: 40%;
							height: 80upx;
							font-size: 32upx;
							border:none;
							background: #409EFF;
							border-radius:50upx;
						}
					}
				}
			}
		}
</style>
